<template>
	<view class="login">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind">
			<!-- 给校验的表单绑定一个name属性 -->
					<uni-forms-item label="用户名" name="name">
						<input type="text" v-model="formData.name" placeholder="请输入姓名" class="input" />
					</uni-forms-item>
					<uni-forms-item label="密码" name="pwd">
						<input class="input" v-model="formData.pwd" type="text" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code" class="code-control">
						<input class="input" v-model="formData.code" type="text" placeholder="请输入验证码" />
						<view class="random" @click="handleRandom">
							{{mathRandom}}
						</view>
					</uni-forms-item>
		</uni-forms>
		<button @click="submit">Submit</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					name:'',//用户名
					pwd:'',//密码
					code:''
				},
				mathRandom:'4678',
				rulesInput:{
					name:{
						rules:[{
							required:true,
							errorMessage:'请输入用户名'
						}
						// ,{
						// 	format:'string',
						// 	errorMessage:'只能输入字符串'
						// },
						// {
						// 	pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
						// 	errorMessage:'只能输入中文'
						// },
						]
					},
					pwd:{
						rules:[{
							required:true,
							errorMessage:'请输入密码'
						},{
							format:'number',
							errorMessage:'只能输入数字'
						}
						// ,{
						// 	minimum:1,
						// 	maximum:10,
						// 	errorMessage:'密码在{minimum}-{maximum}之间'
						// },
						]
					}
					
				}
			};
		},
		onReady() {
				// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rulesInput)
		},
		methods:{
			submit(){
				this.$refs.form.validate().then(res=>{
				console.log('校验通过：', res);
				uni.switchTab({
					url:'../index/index'
				})
				  uni.setStorageSync('token',this.formData.name)
				}).catch(err =>{
					console.log('校验不通过：', err);
				})
			},
			handleRandom(){
				// console.log(parseInt(Math.random()*10000));
				console.log(Math.random().toString(16).slice(2,6));
				this.mathRandom = Math.random().toString(16).slice(2,6)
			}
		}
	}
</script>

<style lang="scss">
.input{
	border-bottom: 1px solid #eee;
}
.code-control{
	display: flex;
	
}
.uni-forms-item__content{
	display: flex;
}
.random{
	width: 180rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: skyblue;
	font-size: 28rpx;
	text-align: center;
	// white-space: 10rpx;
	letter-spacing: 16rpx;
}
</style>
